import React from 'react';
import ReactDOM from 'react-dom';

class Counter extends React.Component {
  constructor() {
    super();
    // 为组件提供状态
    this.state = {
      count: 0,
      books: [
        { id: 1, name: 'jQuery' },
        { id: 2, name: 'Vue' },
        { id: 3, name: 'React' },
      ],
    };
  }

  handleClick = (e, id) => {
    // 通过 this.setState 来修改组件的状态
    console.log(id);
    console.log(e);
  };

  handleClick3 = (item, e) => {
    // 通过 this.setState 来修改组件的状态
    // console.log('this', this);
    console.log('item', item);
    console.log('第二个e', e);
    // console.log('e第二个', e);
  };

  handleClick2 = (arg1, arg2) => {
    // arg1 是额外参数，arg2是事件对象
    console.log('arg1', arg1);
    console.log('arg2', arg2);
  };

  render() {
    // 为标签绑定事件处理函数
    return (
      <>
        {this.state.books.map((item) => (
          // <div key={item.id} onClick={this.handleClick}>
          <div key={item.id}>
            <div>{item.name}</div>
            <button onClick={(e) => this.handleClick(e, item.id)}>删除</button>
            <button onClick={(e) => this.handleClick3(e, item)}>编辑</button>
            <button onClick={this.handleClick2.bind(this, item)}>编辑2</button>
          </div>
        ))}
      </>
    );
  }
}

// React 组件的使用规则
ReactDOM.render(<Counter />, document.getElementById('root'));
